<template>
  <div class='chart-wrap'>
    <div ref="chartRef" class="chart-content heatmap" id='heatmap'></div>
    <!-- <el-empty description="暂无数据" v-show="!chatDataX?.length"/> -->
  </div>
</template>

<script setup>
  // import h337 from 'heatmap.js'
  // import h337 from '@/utils/heatmap.js'
  import * as echarts from 'echarts';
  let chartRef = ref();
  const getRectValue = () =>{
    const cavWidth = document.getElementById("heatmap").clientWidth;
    const cavHeight = document.getElementById("heatmap").clientHeight;
  }
  onMounted(() => {
    var heatmapBox = document.getElementById("heatmap");
    if(heatmapBox.children.length>1){
      var oldCanvas = heatmapBox.children[1];
      heatmapBox.removeChild(oldCanvas);
    }
    const heatmapInstance = h337.create({
      container: chartRef.value,
      // maxOpacity: 0.8,
      // minOpacity: 0.1,
      // blur: 0.2,
      // gradient: {
      //   ".5": "blue",
      //   ".8": "red",
      //   ".95": "white",
      // },
    });

    let points = [];
    let max = 0;
    let width = document.getElementById("heatmap").clientWidth - 50;
    let height = document.getElementById("heatmap").clientHeight - 100;
    let len = 200;

    while (len--) {
      let val = Math.floor(Math.random()*100);
      max = Math.max(max, val);
      let point = {
        x: Math.floor(Math.random()*width),
        y: Math.floor(Math.random()*height),
        value: val
      };
      points.push(point);
    }
    let data = { 
      max: 100,
      data: points 
    };
    console.log(data,"444")
    heatmapInstance.setData(data);
  });
  

</script>
<style lang="scss" scoped>
  .chart-wrap{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(#000f47, #030919);
    .chart-content{
      width: 100%;
      height: 100%;
      background: url("@/assets/images/hotmap.png");
      background-size: 100% 100%;
    }
  }
</style>
